<template>
  <!--我的页面-->
  <div class="my">
    <div class="header">
      <p>
        <router-link to="/ziliao">
          <img src="../../assets/userhead.png" alt="" width="53" v-if="accountInfo.userhead==''">
          <img :src="accountInfo.userhead | imgPathFilter" alt="" width="60" height="60" v-else
               style="object-fit:cover">
        </router-link>
        {{account.accountName}}
      </p>
    </div>
    <div class="f5f5f5"></div>
    <ul class="lists">
      <router-link to="myguibinka" tag="li"><p><img src="../../assets/ka.png" alt="" width="41"></p>我的特权</router-link>
      <!--跳到订单待使用页面-->
      <router-link to="/mytiyanquan" tag="li"><p><img src="../../assets/bao.png" alt="" width="41"></p>贵宾券</router-link>
      <router-link to="/kefu" tag="li"><p><img src="../../assets/kefu.png" alt="" width="41"></p>客服</router-link>
    </ul>
    <ul class="items">
      <router-link :to="{path:'/order'}" tag="li"><p><img src="../../assets/mydingdan.png" alt="" width="23"></p>我的订单
      </router-link>
      <router-link :to="{path:'/order',query:{orderStatus:1}}" tag="li"><p><img src="../../assets/daifukuan.png" alt=""
                                                                                width="23"></p>待付款
      </router-link>
      <router-link to="/mylipinka" tag="li"><p><img src="../../assets/lipinka.png" alt="" width="23"></p>礼品卡
      </router-link>
      <router-link to="/jihuoform" tag="li"><p><img src="../../assets/lipinkajihuo.png" alt="" width="23"></p>礼品卡激活
      </router-link>
    </ul>
    <div class="divider"></div>
    <wv-panel class="mylist">
      <!-- <wv-cell title="老会员专属优惠" is-link to="/zhuanxiang" v-if="isOld">
         <img src="../../assets/youhui.png" alt="" slot="icon" class="cell-icon" width="18">
       </wv-cell>-->
      <wv-cell title="常用信息" is-link to="/changyong">
        <img src="../../assets/changyongmsg.png" alt="" slot="icon" class="cell-icon" width="15">
      </wv-cell>
      <wv-cell title="我的积分" is-link to="/jifen" v-if="false">
        <img src="../../assets/myjifen.png" alt="" slot="icon" class="cell-icon" width="19">
      </wv-cell>
      <wv-cell title="退出" @click="goLogout()">
        <img src="../../assets/logout.png" alt="" slot="icon" class="cell-icon" width="20">
      </wv-cell>
      <!--  <wv-cell title="投诉与建议" is-link to="/tousu" >
           <img src="../../assets/jianyi.png" alt="" slot="icon" class="cell-icon" width="16">
         </wv-cell>
         <wv-cell title="商务合作" is-link to="/hezuo">
           <img src="../../assets/hezuo.png" alt="" slot="icon" class="cell-icon" width="20">
         </wv-cell>-->
      <!--  <wv-cell title="其它更多" is-link to="/othermore">
          <img src="../../assets/more.png" alt="" slot="icon" class="cell-icon" width="16">
        </wv-cell>-->
    </wv-panel>
    <wv-tabbar :fixed=true>
      <wv-tabbar-item to="/index">
        <img class="weui-tabbar__icon" src="../../assets/selecthome.png" slot="icon">
        主页
      </wv-tabbar-item>
      <wv-tabbar-item to="/saoma">
        <img class="weui-tabbar__icon" src="../../assets/saoma.png" slot="icon">
        扫码验证
      </wv-tabbar-item>
      <wv-tabbar-item to="/shangcheng">
        <img class="weui-tabbar__icon" src="../../assets/no.png" slot="icon">
        商城
      </wv-tabbar-item>
      <wv-tabbar-item to="/order">
        <img class="weui-tabbar__icon" src="../../assets/zhangdan.png" slot="icon">
        订单
      </wv-tabbar-item>
      <wv-tabbar-item to="/my" is-on>
        <img class="weui-tabbar__icon" src="../../assets/selectmy.png" slot="icon"> 我的
      </wv-tabbar-item>
    </wv-tabbar>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getUserInfoDetail} from '../../../test/unit/http'
  import {removeAll} from '../../../test/unit/storage'
  import {Toast} from 'we-vue'

  export default {
    name: 'my',
    props: {},
    data() {
      return {
        accountInfo: {},
        account: {},
        isOld: false
      };
    },
    methods: {
      getUserInfo() {
        var that = this;
        getUserInfoDetail({}).then(res => {
          console.log(res);
          if (res.code = 100) {
            that.account = res.object.account;
            that.accountInfo = res.object.accountInfo;
            that.isOld = res.object.isOld;
            if (this.$myUtils.isNull(that.accountInfo.userhead)) {
              that.accountInfo['userhead'] = '';
            }
          } else {
            Toast.fail(res.info);
          }
        })
      },
      goLogout() {
        removeAll();
        this.$router.push('/register');
      }
    },
    created() {
      this.getUserInfo({});
    },
    components: {}
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .header {
    background: url("../../assets/mybanner.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    height: 132px;

    p {
      padding: 20px 10px 10px;

      img {
        vertical-align: middle;
        margin-right: 30px;
        border-radius: 50%;
      }
    }

  }

  .f5f5f5 {
    background-color: #eee;
    height: 60px;
  }

  .lists {
    display: flex;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 5px 14px rgba(47, 149, 240, 0.12);
    position: absolute;
    top: 88px;
    left: 50%;
    width: 90%;
    margin-left: -45%;

    li {
      flex: 1;
      position: relative;
      padding: 10px 0;
      font-size: 12px;
      color: #666;
    }

    :first-child p, :nth-child(2) p {
      height: 42px;
      padding-top: 10px;
    }

    :first-child:after, :nth-child(2):after {
      content: '';
      display: block;
      height: 47px;
      width: 1px;
      background-color: #eee;
      position: absolute;
      right: 0;
      top: 30%
    }
  }

  .items {
    display: flex;

    li {
      flex: 1;
      font-size: 11px;
      color: #666;
      padding: 10px 0;

      p {
        height: 31.24px;
      }
    }
  }

  .divider {
    height: 10px;
    background-color: #eee;
  }

  .mylist {
    padding-bottom: 60px;

    img {
      vertical-align: middle;
      margin-right: 10px;
    }
  }
</style>
